<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="icon" href="images/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="js/init.js"></script>
</head>

<body>
    <style>
        /* * * * * * * * * * * * * * * * * * * * * * * *  init * * * * * * * * * * * * * * * * * */
        html,
        body,
        ul,
        li,
        ol,
        dl,
        dd,
        dt,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        legend,
        img {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
            display: inline;
            vertical-align: top;
        }

        button {
            font-size: 20px;
            display: inline-block;
            vertical-align: top;
            border-width: 0;
            padding: 0;
            background-color: rgba(0, 0, 0, 0);
            /* Compatible ie9 */
            color: inherit;
            font-size: inherit;
            line-height: inherit;
            cursor: pointer;
        }

        body {
            font-family: "微软雅黑";
            font-size: 0;
            line-height: 1;
            width: 16rem;
            overflow: hidden;
        }

        img {
            border: none;
            /* Compatible ie9 */
        }

        p {
            text-indent: 2em;
        }

        ul {
            list-style: none;
        }

        /* body {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            height: 100vh;
            width: 16rem;
            background-image: url(../images/bg.webp);
            background-attachment: fixed;
            background-size: 16rem 100vh;
            overflow: hidden;
        }

        body {
            color: white;
            display: flex;
        } */
        body {
            font-family: "微软雅黑";
            font-size: 0;
            line-height: 1;
            width: 100%;
        }

        .wra {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            width: 16rem;
            height: 100vh;
            background-image: url(../images/bg.webp);
            background-size: 16rem 100vh;
            overflow: hidden;
            color: white;
           
        }

        .wrapper {
            margin: auto;
        }

        .wrapper__title {
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .wrapper__content {
            margin-bottom: 10vh;
        }

        .wrapper__input {
            display: inline-block;
            vertical-align: top;
            margin-top: 0.1rem;
            border: 0;
            width: 6rem;
            height: 0.8rem;
            font-size: 0.8rem;
        }

        .wrapper__item {
            margin-bottom: 1rem;
        }

        .wrapper__span {
            display: inline-block;
            vertical-align: top;
            font-size: 1rem;
        }

        .wrapper__button {
            padding: 0.2rem 1.5rem;
            border-radius: 0.2rem;
            background-color: darkgray;
            font-size: 0.8rem;
        }
    </style>
    <script>
        // 观战模式到时候不输入名字就行
        function submit(v) {
            if (v === 1) {
                axios.get(
                    'http://localhost:3000/creatRoom',
                    {
                        params: {
                            roomNumber: document.getElementsByClassName('wrapper__input')[0].value,
                            name: document.getElementsByClassName('wrapper__input')[1].value
                        }
                    }
                ).then((response) => {
                    // 保存本地的方式，不能在同一个浏览器多开
                    // localStorage.setItem('myMsg', JSON.stringify(response.data));
                    // console.log(JSON.parse(localStorage.getItem("myMsg")));
                    if (response.data.code === 200) {
                        window.location.href =
                            `/holdem.html?name=${response.data.name}&roomNumber=${response.data.roomNumber}`
                    } else {
                        window.alert(response.data.prompt)
                    }

                }).catch((error) => {
                    console.log(error)
                });
            }
            else {
                axios.get(
                    'http://localhost:3000/joinRoom',
                    {
                        params: {
                            /*roomNumber: document.getElementsByClassName('wrapper__input')[2].value,
                            name: document.getElementsByClassName('wrapper__input')[3].value*/
                            roomNumber: document.getElementsByClassName('wrapper__input')[0].value,
                            name: document.getElementsByClassName('wrapper__input')[1].value,
                            pwd: document.getElementsByClassName('wrapper__input')[2].value
                        }
                    }
                ).then((response) => {
                    // localStorage.setItem('myMsg', JSON.stringify(response.data));
                    // console.log(JSON.parse(localStorage.getItem("myMsg")));
                    if (response.data.code === 200) {
                        if(document.getElementsByClassName('wrapper__input')[1].value === '管理员'){
                            window.location.href =
                            `/holdem.html?name=${response.data.name}&roomNumber=${response.data.roomNumber}&isAdmin=true`
                            return
                        }
                        window.location.href =
                            `/holdem.html?name=${response.data.name}&roomNumber=${response.data.roomNumber}`
                    } else {
                        window.alert(response.data.prompt)
                    }
                }).catch((error) => {
                    console.log(error)
                });
            }
        }
    </script>
    <div class="wra">
        <div class="wrapper">
            <!-- <h1 class="wrapper__title">创建房间</h1>
            <div class="wrapper__content wrapper__content&#45;&#45;1">
                <div class="wrapper__item">
                    <span class="wrapper__span">房间号：</span>
                    <input class="wrapper__input" type="text">
                </div>
                <div class="wrapper__item">
                    <span class="wrapper__span">用户名：</span>
                    <input class="wrapper__input" type="text">
                </div>
                <button class="wrapper__button" onclick="submit(1)">提交</button>
            </div>
            <h1 class="wrapper__title">加入房间</h1>-->
            <div>
                <div class="wrapper__item">
                    <span class="wrapper__span">房间号：</span>
                    <input class="wrapper__input" type="text">
                </div>
                <div class="wrapper__item">
                    <span class="wrapper__span">用户名：</span>
                    <input class="wrapper__input" type="text">
                </div>
                <div class="wrapper__item">
                    <span class="wrapper__span">密&nbsp;&nbsp;&nbsp;码：</span>
                    <input class="wrapper__input" type="text">
                </div>
                <button class="wrapper__button" onclick="submit(2)">提交</button>
                <div class="new">
                    <div class="new__item">
                        <div>当前房间</div>
                        <div>000000</div>
                    </div>
                    <div class="new__item">
                        <div>手数</div>
                        <div class="shoushu">0</div>
                    </div>

                    <div class="new__item">
                        <div>结束</div>
                        <div class="jieshu">0</div>
                    </div>
                </div>
                <style>
                    .new {
                        margin-top: 0.5rem;
                    }

                    .new .new__item {
                        display: inline-block;
                        vertical-align: top;
                        font-size: 0.75rem;
                        color: white;
                        width: 33%;
                        text-align: center;
                        line-height: 1rem;
                    }
                </style>
                <script>
                    function viewRoom() {
                        axios.get(
                            'http://localhost:3000/viewRoom',
                            {
                                params: {
                                    roomNumber: '000000'
                                }
                            }
                        ).then((response) => {
                            if (response.data.code === 200) {
                                document.getElementsByClassName('shoushu')[0].innerHTML = response.data.room
                                    .roundnumber;
                                document.getElementsByClassName('jieshu')[0].innerHTML = 100;
                            } else {
                                window.alert(response.data.prompt)
                            }
                        }).catch((error) => {
                            console.log(error)
                        });
                    }
                    viewRoom();
                    setInterval(viewRoom, 2000);
                </script>
            </div>
        </div>
    </div>

</body>

</html>
